const toggleBatchBtn = document.querySelector('#toggleBatchBtn');

const b = document.querySelector('#batch');

function studentOverview() {
    axios.get('/student/overview')
    .then(result=>{
        console.log(result);
        // document.querySelector('.total').innerText = result.data.data.total;
        // document.querySelector('.avgAge').innerText = result.data.data.avgAge;
        // document.querySelector('.avgSalary').innerText = result.data.data.avgSalary;
        // document.querySelector('.proportion').innerText = result.data.data.proportion;

        const obj = result.data.data

        for (const key in obj) {
            document.querySelector(`.${key}`).innerText = obj[key];
        }
    })
}


studentOverview()



function salsryline() {
    axios.get('/student/list')
    .then(result=>{
        console.log(result);
        
        const arr = result.data.data

        getSalary(arr)
        
        getHome(arr)
    })

    
        


}

salsryline()


const myChart = echarts.init(document.querySelector('.map'));

const points = [
    {value: [118.8062, 31.9208],itemStyle:{color:'#4ab2e5'}}
    ,{value: [113.4668, 22.8076],itemStyle:{color:'pink'}}
    , {value: [127.9688, 45.368],itemStyle:{color:'#4fb6d2'}}
    , {value: [110.3467, 41.4899],itemStyle:{color:'#52b9c7'}}
    , {value: [125.8154, 44.2584],itemStyle:{color:'#5abead'}}
    , {value: [116.4551, 40.2539],itemStyle:{color:'#f34e2b'}}
    , {value: [123.1238, 42.1216],itemStyle:{color:'#f56321'}}
    , {value: [114.4995, 38.1006],itemStyle:{color:'#f56f1c'}}
    , {value: [117.4219, 39.4189],itemStyle:{color:'#f58414'}}
    , {value: [112.3352, 37.9413],itemStyle:{color:'#f58f0e'}}
    , {value: [109.1162, 34.2004],itemStyle:{color:'#f5a305'}}
    , {value: [103.5901, 36.3043],itemStyle:{color:'#e7ab0b'}}
    , {value: [106.3586, 38.1775],itemStyle:{color:'#dfae10'}}
    , {value: [101.4038, 36.8207],itemStyle:{color:'#d5b314'}}
    , {value: [103.9526, 30.7617],itemStyle:{color:'#c1bb1f'}}
    , {value: [108.384366, 30.439702],itemStyle:{color:'#b9be23'}}
    , {value: [113.0823, 28.2568],itemStyle:{color:'#a6c62c'}}
    , {value: [102.9199, 25.46639],itemStyle:{color:'#96cc34'}}
    , {value: [119.4543, 25.9222]},
    

]
// var uploadedDataURL = "/asset/get/s/data-1482909892121-BJ3auk-Se.json";




echarts.registerMap('china', mapData);

option = {
backgroundColor: '#013954',
/*   title: {
top: 20,
text: '“困难人数” - 杭州市',
subtext: '',
x: 'center',
textStyle: {
  color: '#ccc'
}
},*/

// tooltip: {
//     trigger: 'item',
//     formatter: function(params) {
//         console.log(params)
//             return params.name + ' : ' + params.value[2];
//     }
// },
/*visualMap: {
min: 0,
max: 1000000,
right: 100,
seriesIndex: 1,
type: 'piecewise',
bottom: 100,
textStyle: {
color: '#FFFF'
},
splitList: [
{
gt: 50000,
color: '#F5222D',
label: '困难人数大于5万人'
}, //大于5万人
{
gte: 30000,
lte: 50000,
color: '#FA541C ',
label: '困难人数3-5万人'
}, //3-5万人
{
gte: 10000,
lte: 30000,
color: '#FA8C16',
label: '困难人数1-3万人'
}, //1-3万人
{
lte: 10000,
color: '#fbe1d6',
label: '困难人数小于1万人'
}
]
},*/

geo: {
map: 'china',
aspectScale: 0.75, //长宽比
zoom: 1.1,
roam: false,
itemStyle: {
normal: {
areaColor: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.8,
          colorStops: [{
              offset: 0,
              color: '#09132c' // 0% 处的颜色
          }, {
              offset: 1,
              color: '#274d68'  // 100% 处的颜色
          }],
          globalCoord: true // 缺省为 false
      },
shadowColor:'rgb(58,115,192)',
shadowOffsetX: 10,
shadowOffsetY: 11
},
emphasis: {
areaColor: '#2AB8FF',
borderWidth: 0,
color: 'green',
label: {
  show: false
}
}
},
regions: [{
name: '南海诸岛',
itemStyle: {
  areaColor: 'rgba(0, 10, 52, 1)',

  borderColor: 'rgba(0, 10, 52, 1)',
  normal: {
      opacity: 0,
      label: {
          show: false,
          color: "#009cc9",
      }
  }
},


}],
},
series: [ {
type: 'map',
roam: false,
label: {
  normal: {
      show: true,
      textStyle: {
          color: '#1DE9B6'
      }
  },
  emphasis: {
      textStyle: {
          color: 'rgb(183,185,14)'
      }
  }
},

itemStyle: {
normal: {
 borderColor: 'rgb(147, 235, 248)',
  borderWidth: 1,
  areaColor: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.8,
          colorStops: [{
              offset: 0,
              color: '#09132c' // 0% 处的颜色
          }, {
              offset: 1,
              color: '#274d68'  // 100% 处的颜色
          }],
          globalCoord: true // 缺省为 false
      },
},
emphasis: {
      areaColor: 'rgb(46,229,206)',
  //    shadowColor: 'rgb(12,25,50)',
      borderWidth: 0.1
  }
},
zoom: 1.1,
//     roam: false,
map: 'china' //使用
// data: this.difficultData //热力图数据   不同区域 不同的底色
},{
  type: 'effectScatter',
  coordinateSystem: 'geo',
  showEffectOn: 'render',
  zlevel:1,
  rippleEffect: {
      period: 15,
      scale: 4,
      brushType: 'fill'
  },
  hoverAnimation: true,
  label: {
      normal: {
          formatter: '{b}',
          position: 'right',
          offset: [15, 0],
          color: '#1DE9B6',
          show: true
      },
  },
  itemStyle: {
      normal: {
         color:'#1DE9B6'/* function (value){ //随机颜色
return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
}*/,
          shadowBlur: 10,
          shadowColor: '#333'
      }
  },
  symbolSize: 12,
  data: points
}, //地图线的动画效果
{
  type: 'lines',
  zlevel: 2,
  effect: {
      show: true,
      period: 4, //箭头指向速度，值越小速度越快
      trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
      symbol: 'arrow', //箭头图标
      symbolSize: 7, //图标大小
  },
  lineStyle: {
      normal: {
          color:'#1DE9B6'
          /* function (value){ //随机颜色
          
          ['#f21347','#f3243e','#f33736','#f34131','#f34e2b',
          '#f56321','#f56f1c','#f58414','#f58f0e','#f5a305',
          '#e7ab0b','#dfae10','#d5b314','#c1bb1f','#b9be23',
          '#a6c62c','#96cc34','#89d23b','#7ed741','#77d64c',
          '#71d162','#6bcc75','#65c78b','#5fc2a0','#5abead',
          '#52b9c7','#4fb6d2','#4ab2e5']
return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
}*/,
          width: 1, //线条宽度
          opacity: 0.1, //尾迹线条透明度
          curveness: .3 //尾迹线条曲直度
      }
  },
  data: [
      {coords: [[118.8062, 31.9208],[113.4668, 22.8076]],lineStyle:{color:'#4ab2e5'}}
    , {coords: [[127.9688, 45.368],[113.4668, 22.8076]],lineStyle:{color:'#4fb6d2'}}
    , {coords: [[113.4668, 22.8076],[110.3467, 41.4899],],lineStyle:{color:'black'}}
    , {coords: [[125.8154, 44.2584],[113.4668, 22.8076]],lineStyle:{color:'#5abead'}}
    , {coords: [[116.4551, 40.2539],[113.4668, 22.8076]],lineStyle:{color:'#f34e2b'}}
    , {coords: [[123.1238, 42.1216],[113.4668, 22.8076]],lineStyle:{color:'#f56321'}}
    , {coords: [[114.4995, 38.1006],[113.4668, 22.8076]],lineStyle:{color:'#f56f1c'}}
    , {coords: [[117.4219, 39.4189],[113.4668, 22.8076]],lineStyle:{color:'#f58414'}}
    , {coords: [[112.3352, 37.9413],[113.4668, 22.8076]],lineStyle:{color:'#f58f0e'}}
    , {coords: [[109.1162, 34.2004],[113.4668, 22.8076]],lineStyle:{color:'#f5a305'}}
    , {coords: [[103.5901, 36.3043],[113.4668, 22.8076]],lineStyle:{color:'#e7ab0b'}}
    , {coords: [[106.3586, 38.1775],[113.4668, 22.8076]],lineStyle:{color:'#dfae10'}}
    , {coords: [[101.4038, 36.8207],[113.4668, 22.8076]],lineStyle:{color:'#d5b314'}}
    , {coords: [[103.9526, 30.7617],[113.4668, 22.8076]],lineStyle:{color:'#c1bb1f'}}
    , {coords: [[108.384366, 30.439702],[113.4668, 22.8076]],lineStyle:{color:'#b9be23'}}
    , {coords: [[113.0823, 28.2568],[113.4668, 22.8076]],lineStyle:{color:'#a6c62c'}}
    , {coords: [[102.9199, 25.46639],[113.4668, 22.8076]],lineStyle:{color:'#96cc34'}}
  ]
}

]
};
myChart.setOption(option,true);


function getscore(batch) {
    axios.get('/score/batch',{params:{batch,}})
    .then(result=>{
        console.log(result);
        if(result.data.code===0){
            const {avgScore,group,gt60,gt80,lt60} = result.data.data
            // console.log({avgScore,group,gt60,gt80,lt60});

            const myChart = echarts.init(document.querySelector('.barChart'));

            option = {
                grid: {
                    top:20,
                    button:10,
                },
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'cross',
                    crossStyle: {
                      color: '#999'
                    }
                  }
                },
                legend: {
                  data: ['平均分', '小于60分', '60分-80分','高于80分']
                },
                xAxis: [
                  {
                    type: 'category',
                    data: group,
                    axisPointer: {
                      type: 'shadow'
                    }
                  }
                ],
                yAxis: [
                  {
                    type: 'value',
                    
                    min: 0,
                    max: 100,
                    interval: 10,
                    axisLabel: {
                      formatter: '{value}分'
                    }
                  },
                  {
                    type: 'value',
                    
                    min: 0,
                    max: 10,
                    interval: 1,
                    axisLabel: {
                      formatter: '{value}人'
                    }
                  }
                ],
                series: [
                  {
                    name: '平均分',
                    type: 'bar',
                    tooltip: {
                      valueFormatter: function (value) {
                        return value + ' ml';
                      }
                    },
                    data:avgScore,
                  },
                  {
                    yAxisIndex:1,
                    name: '小于60分',
                    type: 'bar',
                    tooltip: {
                      valueFormatter: function (value) {
                        return value + ' ml';
                      }
                    },
                    data:lt60,
                  },
                  {
                    yAxisIndex:1,

                    name: '60分-80分',
                    type: 'bar',
                    tooltip: {
                      valueFormatter: function (value) {
                        return value + ' ml';
                      }
                    },
                    data:gt60,
                  },
                  {
                    yAxisIndex:1,

                    name: '高于80分',
                    type: 'bar',
                    tooltip: {
                      valueFormatter: function (value) {
                        return value + ' ml';
                      }
                    },
                    data:gt80,
                  },
                  
                ]
              };

              myChart.setOption(option);
        }

        
           
            
    })
}
getscore(1)

toggleBatchBtn.addEventListener('click',function(e){
    b.classList.toggle('show')
})

b.addEventListener('click',function (e) {
    if(e.target.nodeName==='A'){
        const index = e.target.dataset.index
        getscore(index)
    }
})


function getSalary(arr) {
    const salarys = arr.map(v=>v.salary)
        const truesalarys = arr.map(v=>v.truesalary)
        const names = arr.map(v=>v.name)

        const myChart = echarts.init(document.querySelector('.line'));

const option = {
    color : ['red','blue'],
  title: {
    text: '薪资 Salary'
  },
  tooltip: {
    trigger: 'axis'
    
  },
  legend: {},
  toolbox: {
    show: false,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: names
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: ''
    }
  },
  dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 10
    },
    {
      start: 0,
      end: 10
    }
  ],
  series: [
    {
      name: '期望薪资',
      type: 'line',
      symbol: 'circle',
      smooth: true,
      data: salarys,
    
    },
    {
      name: '实际薪资',
      type: 'line',
      symbol: 'circle',
      smooth: true,
      data: truesalarys,
    
    }
  ]
};

myChart.setOption(option);
}

function getHome(arr) {
    let newArr = []

    arr.forEach(v=>{
        let i = newArr.findIndex(vv=>vv.name===v.province)

        if(i===-1){
            
            newArr.push({value:1,name:v.province})
        }else{
            newArr[i].value++
        }
        // console.log(newArr[i]);
        // console.log(i);


    })
    const myChart = echarts.init(document.querySelector('.pie'));
    const option = {
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [30, 150],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: newArr,
          }
        ]
      };
      myChart.setOption(option);
}